<template>
	<div>
		<t-form ref="form" :data="formData" :rules="FORM_RULES" @submit="onSubmit">
			<t-form-item label="姓名" name="truename">
				<t-input v-model="formData.truename" placeholder="请输入姓名"></t-input>
			</t-form-item>
			<t-form-item label="手机号" name="phone">
				<t-input v-model="formData.phone" placeholder="请输入手机号"></t-input>
			</t-form-item>
			<t-form-item label="登录名" name="username">
				<t-input v-model="formData.username" placeholder="请输入登录名或手机号"></t-input>
			</t-form-item>
			<t-form-item label="密码" name="password1">
				<t-input v-model="formData.password1" placeholder="请输入密码,不修改密码请跳过"></t-input>
			</t-form-item>
			<t-form-item label="角色"> 
				<t-checkbox-group v-model="formData.roles">
					<t-checkbox v-for="item in roles" :value="item.value">{{item.label}}</t-checkbox>
				</t-checkbox-group>
			</t-form-item>
			<t-form-item>
				<t-button theme="primary" type="submit">提交</t-button>
			</t-form-item>
		</t-form>
	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		watch,
		onMounted
	} from 'vue';
	import {MessagePlugin} from 'tdesign-vue-next';
	import {getSettingsList} from '@/api/settings';
	import {createAccount} from '@/api/user'
 
	const props=defineProps({
		data:{
			type:Object
		}
	})
    const emits=defineEmits(['complete'])
	const roles=ref([])
	const form=ref(null)
	const FORM_RULES = {
		truename: [{
			required: true,
			message: '姓名必填',
		}, ],
		username: [{
			required: true,
			message: '登录名称必填',
		}, ], 
	};
	const formData = ref({
		userid:'',
		username: '',
		truename:'',//姓名
		password1: '',
		phone:'',
		roles:[],
	});
	const onValidate = ({ validateResult, firstError }) => {
	  if (validateResult === true) {
	    console.log('Validate Success');
	  } else {
	    console.log('Validate Errors: ', firstError, validateResult);
	  }
	};
	
	const onSubmit=({validateResult,firstError,e})=>{
		e.preventDefault();
		 if (validateResult === true) {
			 console.log('formData '+JSON.stringify(formData.value))
			 createAccount(formData.value)
			 .then(ret=>{
				  emits('complete')
				  MessagePlugin.success('提交成功');
			 })
			 .catch(e=>{
				 if(e.message)
				 {
					 MessagePlugin.error(e.message)
				 }else
				 {
					 MessagePlugin.error(e.msg)
				 }
				 
			 })
		   
		  } else {
		    console.log('Validate Errors: ', firstError, validateResult);
		    MessagePlugin.warning(firstError);
		  }
	}
	
	//const roles=ref<object[]>([])
	const fetchRoleData=()=>{
		getSettingsList('roles')
		.then(ret=>{
			if(ret)
			{
				var json=ret[0].value.replaceAll("\\n","").replaceAll("\\","").replaceAll(" ","");
				 if (json.startsWith('"')) {
				        // 使用 slice 方法去掉首尾引号
				        json= json.slice(1, -1);
				}
				if (json.endsWith('"')) {
					       // 使用 slice 方法去掉首尾引号
					       json= json.slice(1, -1);
					   }
				console.log('roles',json);
				roles.value=JSON.parse(json)  
				console.log('roles.value[0]',roles.value[0].label)
			}
		})
	}
	const onChange = (val) => {
	  //console.log(value3.value, val);
	    
	};

onMounted(()=>{
	fetchRoleData()
	
})
watch(
()=>props.data,
()=>{
	console.log('props.data',JSON.stringify(props.data))
	formData.value=props.data
})
</script>

<style>
</style>